<template>
  <receipt-core
    @clear-open-json="clearOpenJson"
    @pose-edit-json="poseEditJson"
    @pose-submit-json="poseSubmitJson"
    @add-row-sub="addRowSub"
    @data-format="dataFormat"
    @delete-row-sub="deleteRowSub"
    @json-format="jsonFormat"
    ref="idJsonItemsRefs"
    receipts-name="bom_maintenance_receipt"
    receipts-type="BOM维护"
    receipts-no="007"
  >
    //弹窗的主表的插入的idJson信息
    <template #idJsonSlot></template>
    //弹窗的子表的表格的插入的subJson信息
    <template #subJson>
      <el-table-column align="center" label="消耗物料名称" width="180">
        <template #default="scope">
          <autocomplete-input
            v-model="subJsonItems[scope.$index].materialName"
            :value-key="selectedPropMapSubMaterial.selectedOriginProp"
            @get-record="autocompleteInputEventSubMaterial.getRecords"
          ></autocomplete-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="产出自制件名称" min-width="180">
        <template #default="scope">
          <autocomplete-input
            v-model="subJsonItems[scope.$index].homemadeName"
            :value-key="selectedPropMapSubHomemade.selectedOriginProp"
            @get-record="autocompleteInputEventSubHomemade.getRecords"
          ></autocomplete-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工艺方案名" min-width="180">
        <template #default="scope">
          <autocomplete-input
            v-model="subJsonItems[scope.$index].processName"
            :value-key="selectedPropMapSubProcess.selectedOriginProp"
            @get-record="autocompleteInputEventSubProcess.getRecords"
          ></autocomplete-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="质检方案名" min-width="180">
        <template #default="scope">
          <autocomplete-input
            v-model="subJsonItems[scope.$index].qualityName"
            :value-key="selectedPropMapSubQuality.selectedOriginProp"
            @get-record="autocompleteInputEventSubQuality.getRecords"
          ></autocomplete-input>
        </template>
      </el-table-column>
    </template>
  </receipt-core>
</template>

<script lang="ts" setup>
import ReceiptCore from "@/components/receipt/ReceiptCore.vue";
import { ref } from "vue";
import { ReceiptsSub } from "@/models/ReceiptsSub";
import { SelectedPropMap } from "@/components/input/SelectedPropMap";
import AutocompleteInput from "@/components/input/AutocompleteInput.vue";
import { AutocompleteInputEventArray } from "@/components/input/AutocompleteInputEventArray";
import api from "@/utils";

//传递到单据表中需要展示的列到ReceiptsTable

// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (columnName === "idJson.preparationDate") {
    const date = new Date(cellValue);
    const dateFormat = api.formatDate(date, "yyyy年MM月dd日");
    if (dateFormat !== "NaN年aN月aN日") {
      callback(dateFormat);
    }
  }
};

//传递subJson内的内容到ReceiptsCore的Dialog内的Table内的插槽
const subJsonItems = ref([
  {
    materialNo: null,
    materialName: null,
    homemadeNo: null,
    homemadeName: null,
    processName: null,
    qualityName: null,
  },
] as Array<unknown>);
// provide("subJsonItems", subJsonItems);

//清空传递idJson内的内容ReceiptsCore的Dialog内的插槽内容
//清空传递subJson内的内容ReceiptsCore的Dialog内的Table内的插槽内容
//远程搜索的数据除外，不用清除，不然无法使用远程搜索
const clearOpenJson = () => {
  subJsonItems.value = [{}];
};

//子组件编辑时将某行idJson传递回本父组件并导入插槽内
//子组件编辑时将某行receiptsSub传递回本父组件，然后取出subJson导入插槽内
const poseEditJson = (idJson: unknown, receiptsSub?: Array<ReceiptsSub>) => {
  subJsonItems.value = [];
  if (!(receiptsSub?.length === undefined || receiptsSub?.length === 0)) {
    for (let i = 0; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value.push({});
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  }
};

//提交表单时将最新的ReceiptsSub传来处理，加入subJson后用callback返回
const poseSubmitJson = (
  callback: (value: Array<ReceiptsSub>) => void,
  no: string,
  receiptsSub: Array<ReceiptsSub>
) => {
  if (receiptsSub?.length === 0) {
    subJsonItems.value = [];
  } else {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      receiptsSub[i].subJson = subJsonItems.value[i];
      receiptsSub[i].no = no;
    }
  }
  callback(receiptsSub);
};

const addRowSub = () => {
  subJsonItems.value.push({});
};
const deleteRowSub = (index: number) => {
  subJsonItems.value.splice(index, 1);
};
const jsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let jsonList: Record<string, unknown>[] = [];
  for (let i = 0; i < data[0].length; i++) {
    // 存入字段名和excel表中的名称的映射，记得修改
    jsonList[i] = {};
    jsonList[i].no = data[0][i]["test1"];
    jsonList[i].name = data[0][i]["test2"];
    jsonList[i].description = data[0][i]["test3"];
    jsonList[i].departmentPhone = data[0][i]["test4"];
    jsonList[i].createUser = sessionStorage.getItem("token") as string;
    jsonList[i].createGmt = new Date();
  }
  callback(jsonList);
};
/**
 * 远程搜索和名称跟随
 */
//多个远程搜索用类接收返还，用.属性调用。
//涉及数组时，用封装的数组专用组件，用getRecords完成选择框的内容，返回想要的某个对象，再在本vue内完成赋值。
const selectedPropMapSubMaterial = {
  selectedProp: "materialName",
  selectedOriginProp: "name",
  setProp: "materialName",
  setOriginProp: "name",
} as SelectedPropMap;
const autocompleteInputEventSubMaterial = AutocompleteInputEventArray(
  "/receipts/MaterialConcrete/autocompleteInput/material",
  selectedPropMapSubMaterial
);

const selectedPropMapSubHomemade = {
  selectedProp: "homemadeName",
  selectedOriginProp: "name",
  setProp: "homemadeName",
  setOriginProp: "name",
} as SelectedPropMap;
const autocompleteInputEventSubHomemade = AutocompleteInputEventArray(
  "/basic-request/Homemade",
  selectedPropMapSubHomemade
);

const selectedPropMapSubProcess = {
  selectedProp: "processName",
  selectedOriginProp: "name",
  setProp: "aa",
  setOriginProp: "no",
} as SelectedPropMap;
const autocompleteInputEventSubProcess = AutocompleteInputEventArray(
  "/receipts/process_plan_maintenance_receipt",
  selectedPropMapSubProcess
);
const selectedPropMapSubQuality = {
  selectedProp: "qualityName",
  selectedOriginProp: "name",
  setProp: "bb",
  setOriginProp: "no",
} as SelectedPropMap;
const autocompleteInputEventSubQuality = AutocompleteInputEventArray(
  "/receipts/quality_inspection_define_receipt",
  selectedPropMapSubQuality
);
</script>

<style scoped></style>
